<template>
  <div class="content" style="background-color: #ffffff">
    <div class="index_content">
      <!-- search bar -->
      <div class="search_content">
        <div class="search_l">
          <div class="search-city" @click="handleCity">
            <span>{{cityName}}</span>
            <i class="iconfont icon arrow-down"/>
          </div>
        </div>
      </div>
      <div id="slide2" class="slide">
        <ul>
          <li>
            <a href="#">
              <img data-src="../../assets/img/banner01.png" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img data-src="../../assets/img/banner01.png" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img data-src="../../assets/img/banner01.png" alt="">
            </a>
          </li>
        </ul>
        <div class="dot">
          <span/>
          <span/>
          <span/>
        </div>
      </div>
      <template v-for="item in categories">
        <div class="series">
          <div class="local_content">
            <span class="data_left">{{ item.categoryName }}</span>
            <span class="data_right" @click="handleMore(item.categoryId)">查看更多<i class="iconfont icon arrow-left"/></span>
          </div>
          <div class="series_content">
            <template v-for="product in item.sxProductBasicInfos">
              <div class="series_item" @click="handleDetail(product.pid)">
                <img :alt="product.pname" :src="product.pindexImg">
              </div>
            </template>
          </div>
        </div>
      </template>

      <TarBar index="1"/>
    </div>
  </div>
</template>

<script>
  import indexApi from '@/api/photo/indexApi'
  import TarBar from '@/components/TarBar'
  import '@/utils/rem'
  import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      userTel: '',
      userPw: '',
      categories: [],
      products: [],
      cityName: ''
    }
  },
  components: {
    TarBar
  },
  mounted() {
    this.cityName = this.$route.query.cityName || localStorage.getItem('cityName')
    if(this.cityName){
      localStorage.setItem('cityName', this.cityName)
    }
    this.getInitData()
  },

  created() {
    this.initLocalCity();
  },
  methods: {

    initLocalCity() {
      wx.openLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          that.$message({
            message: '地理位置获取成功，经度：' + res.longitude + '，纬度：' + res.latitude,
            type: 'success'
          });
        },
        error: function (res) {
          that.$message({
            message: res,
            type: 'success'
          });
        }
      });
    },
    /**
       * 登录逻辑
       */
    submit() {
      this.$store.dispatch('userLogin', { username: this.userTel, password: this.userPw }).then((data) => {
        console.log(data)
      })
    },
    getInitData() {
      indexApi.getInitData({}).then(data => {
        this.categories = data.categories
        this.products = data.categories
      })
    },
    handleMore(typeId) {
      this.$router.push({ name: 'moreProduct', params: { cid: typeId }})
    },
    handleCity(typeId) {
      this.$router.push({ path: '/userCity',  query: { cityName: this.cityName }})
    },
    handleDetail(pid) {
      this.$router.push({ name: 'productDetails', params: { pid: pid }})
    }
  }
}
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
</style>
